export const getWatermaskStyle = ({
  content = '水印',
  rotate = -15,
  zIndex = 1,
  fontSize = 14,
  style
}: any) => {
  const svgStr = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='transform: rotate(${rotate}deg)'%3E%3Ctext x='50%25' y='50%25' font-size='${fontSize}' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E${content}%3C/text%3E%3C/svg%3E`
  const backgroundUrl = `url("${svgStr}")`

  const backgroundSize = `${content.length * fontSize > 360 ? content.length * fontSize : 360}px 180px`

  return {
    zIndex,
    position: 'absolute',
    top: 0,
    width: '100%',
    height: '100%',
    pointerEvents: 'none',
    backgroundRepeat: 'repeat',
    backgroundSize,
    backgroundImage: backgroundUrl,
    opacity: '0.18',
    ...style,
  }
}
